<template>
  <div :data-Id="questionId">
    <x-header :left-options="{backText: ''}" @on-click-more="showMenus = true" >基本信息</x-header>
    <div class="ui-body">
      <group gutter="0">
        <x-textarea class="ui-add-content" v-model="title" title="投票标题：" :max="50" placeholder="投票标题" :height="80" :rows="8" :cols="30" @on-blur="saveText"></x-textarea>
      </group>
      
      <group>
        <popup-picker title="投票结果显示设置" :data='times' v-show="selectShowF" v-model='selectedText' @on-change="change('1')"></popup-picker>
      </group>
      <group>
        <datetime v-model="minuteListValue" format="YYYY-MM-DD"  title="结束时间" @on-change="change('2')"></datetime>
      </group>
      <group>
        <cell title="投票说明：" value=""></cell>
        <box gap="10px 10px" v-if="!this.$store.state.descList.length">
          <flexbox>
            <flexbox-item>
              <x-button type="primary" @click.native="toAddDesc('TextEdit', 0, true)" class="ui-add-Text">
                <i>添加文字</i>
              </x-button>
            </flexbox-item>
            <flexbox-item>
              <x-button type="primary" @click.native="toAddDesc('UploadImg', 0, true)" class="ui-add-Text ui-add-Img">
                <i>插入图片</i>
              </x-button>
            </flexbox-item>
          </flexbox>
        </box>
      </group>
      <group>
        <div v-if="$store.state.descList.length"  class="ui-shuoming">
          <i class="ui-add-question" @click="showDescButton('box0')"></i>
          <box gap="10px 10px" v-show="false" ref="box0">
            <flexbox>
              <flexbox-item>
                <x-button type="primary" @click.native="toAddDesc('TextEdit', 0, true)" class="ui-add-Text">
                  <i>添加文字</i>
                </x-button>
              </flexbox-item>
              <flexbox-item>
                <x-button type="primary" @click.native="toAddDesc('UploadImg', 0, true)" class="ui-add-Text ui-add-Img">
                  <i>插入图片</i>
                </x-button>
              </flexbox-item>
            </flexbox>
          </box>
        </div>
        <div v-for="(item, index) in $store.state.descList" v-if="$store.state.descList.length" class="ui-shuoming">
          <div v-if="item.text" class="ui-show-desc" @click="toAddDesc('TextEdit', index, false)">
            {{item.text}}
            <span>编辑</span>
          </div>
          <img v-if="item.img" :src="item.img" @click="toAddDesc('UploadImg', index, false)" style="width: 60%;margin: 0 auto; display: block;"> 
          <i class="ui-add-question" @click="showDescButton('box'+(index+1))"></i>
          <box gap="10px 10px" v-show="false" :ref="'box'+(index+1)">
            <flexbox>
              <flexbox-item>
                <x-button type="primary" @click.native="toAddDesc('TextEdit', index+1, true)" class="ui-add-Text">
                  <i>添加文字</i>
                </x-button>
              </flexbox-item>
              <flexbox-item>
                <x-button type="primary" @click.native="toAddDesc('UploadImg', index+1, true)" class="ui-add-Text ui-add-Img">
                  <i>插入图片</i>
                </x-button>
              </flexbox-item>
            </flexbox>
          </box>
        </div>
      </group>
      <div v-if="!this.$store.state.descList.length" style="background-color: #f9d49a;border: 1px solid #f5b34b;padding: 10px 10px;width: 90%;margin: 10px auto 0;border-radius: 4px;font-size: 12px;color: #444;">提示：你可以任意添加一段文字或图片</div>
      <div style="padding: 0 30px;"><x-button type="primary" @click.native="check" style="margin-top: 40px;margin-bottom: 20px;">下一步</x-button></div>
    </div>
  </div>
</template>

<script>
import { Group, Cell, XTextarea, XInput, PopupPicker, GroupTitle, Datetime, XButton, Box, Flexbox, FlexboxItem, XHeader, dateFormat } from 'vux'
import store from '@/store'
import axios from 'axios'
require('es6-promise').polyfill()

export default {
  store,
  components: {
    Group,
    Cell,
    XTextarea,
    XInput,
    PopupPicker,
    GroupTitle,
    Datetime,
    Flexbox,
    XButton,
    Box,
    FlexboxItem,
    XHeader,
    dateFormat
  },
  data () {
    return {
      times: [[{name: '请选择', value: '请选择'}, {name: '投票前', value: '投票前'}, {name: '投票后', value: '投票后'}]],
      selectShowF: true,
      selectedText: [this.$store.state.tSet[0]],
      minuteListValue: this.$store.state.endTime,
      title: this.$store.state.title,
      readonly: true,
      questionId: this.$route.params.id
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (to.params.create) {
        vm.reset()
      } else if (from.name === 'Index') {
        vm.init()
      }
    })
  },
  methods: {
    init () {
      this.$vux.loading.show({
        text: '初始化中...'
      })
      axios.get(this.$store.state.url + '/VoteManage/GetVoteDetail.ashx', {params: {ID: this.$route.params.id}})
      .then((rs) => {
        let data = rs.data
        if (data.status === 200) {
          this.$store.commit('init', data.message)
          console.log(this.$store.state)
          this.title = this.$store.state.title
          this.minuteListValue = dateFormat(this.$store.state.endTime, 'YYYY-MM-DD')
          this.selectedText = [this.$store.state.tSet[0]]
        } else {
          this.$vux.toast.text(data.tip, 'bottom')
        }
        this.$vux.loading.hide()
      })
      .catch((response) => {
        console.log(response)
        this.$vux.toast.text('请求失败请稍后再试', 'bottom')
        this.$vux.loading.hide()
      })
    },
    check () {
      if (!this.title) {
        this.$vux.toast.text('请输入投票标题', 'bottom')
        return
      }
      if (!this.selectedText[0] === '请选择') {
        this.$vux.toast.text('请选择投票结果设置', 'bottom')
        return
      }
      var arr = dateFormat(this.$store.state.endTime, 'YYYY MM DD').split(' ')
      let t = (new Date(arr[0], arr[1] - 1, arr[2]).getTime() - new Date().getTime())
      if (!this.minuteListValue) {
        this.$vux.toast.text('请选择结束时间', 'bottom')
        return
      }
      if (t <= 0) {
        this.$vux.toast.text('结束时间不能晚于现在时间', 'bottom')
        return
      }
      if (!this.$store.state.descList.length) {
        this.$vux.toast.text('请添加投票说明', 'bottom')
        return
      }
      this.$router.push({name: 'EditTwo'})
    },
    reset () {
      this.selectedText = ['请选择']
      this.minuteListValue = ''
      this.title = ''
    },
    selectShow (key) {
      this.selectShowF = !this.selectShowF
    },
    saveText (value) {
      this.$store.commit('updateState', {key: 'title', value: this.title})
    },
    change (value) {
      setTimeout(() => {
        if (value === '1') {
          this.$store.commit('updateState', {key: 'tSet', value: this.selectedText})
        } else {
          this.$store.commit('updateState', {key: 'endTime', value: this.minuteListValue})
        }
      }, 1)
    },
    toEditText (pathName) {
      this.$router.push({name: pathName})
    },
    toAddDesc (pathName, index, flag) {
      this.$router.push({name: pathName, params: {index: index, create: flag}})
    },
    showDescButton (obj) {
      if (obj === 'box0') {
        this.$refs[obj].$el.previousSibling.previousSibling.style.display = 'none'
        this.$refs[obj].$el.style.display = 'block'
      } else {
        var el = this.$refs[obj][0].$el
        el.previousSibling.previousSibling.style.display = 'none'
        el.style.display = 'block'
      }
    }
  }
}
</script>

<style scoped src='@/assets/css/edit.css'></style>
